import { Container, Typography, Box, Avatar, Divider } from '@mui/material';

export default function About() {
  return (
    <Container maxWidth="lg" sx={{ py: 8, background:'white' }}>
      <Box sx={{ textAlign: 'center', mb: 6 }}>
        <Avatar 
          alt="Profile Photo" 
          src="/profile.jpg" 
          sx={{ width: 150, height: 150, margin: '0 auto 20px' }}
        />
        <Typography variant="h3" gutterBottom>关于我</Typography>
        <Typography variant="subtitle1" color="text.secondary">
          全栈开发者 | 技术爱好者 | 终身学习者
        </Typography>
      </Box>

      <Box sx={{ mb: 6 }}>
        <Typography variant="h4" gutterBottom>个人简介</Typography>
        <Typography paragraph>
          我是一名拥有5年开发经验的全栈工程师，专注于构建高性能、可扩展的Web应用。
        </Typography>
        <Typography paragraph>
          擅长使用React、Go等技术栈，对微服务架构和云原生技术有深入研究。
        </Typography>
      </Box>

      <Divider sx={{ my: 4 }} />

      <Box sx={{ mb: 6 }}>
        <Typography variant="h4" gutterBottom>教育背景</Typography>
        <Typography variant="h6">XX大学 - 计算机科学与技术</Typography>
        <Typography color="text.secondary">2015-2019 | 学士学位</Typography>
      </Box>

      <Divider sx={{ my: 4 }} />

      <Box>
        <Typography variant="h4" gutterBottom>工作经历</Typography>
        <Box sx={{ mb: 4 }}>
          <Typography variant="h6">高级全栈工程师 - ABC科技</Typography>
          <Typography color="text.secondary">2020-至今</Typography>
          <Typography paragraph>
            负责核心产品的前后端开发，带领团队完成多个重要项目。
          </Typography>
        </Box>
      </Box>
    </Container>
  );
}